<template>
  <dtDialog
    title="配置应用Topic"
    :visible.sync="topicConfigVisible"
    :is-loading="loading"
    @closeDialog="handleCancel"
    @comfirmBtn="onSubmit"
  >
    <el-form
      ref="topicConfigForm"
      slot="content"
      :rules="topicConfigRules"
      :model="topicConfigTemp"
      label-position="right"
      label-width="84px"
    >
      <el-form-item label="同步应用" prop="appId">
        <el-select ref="tableName" v-model="topicConfigTemp.appId" style="width:100%"
                   filterable :disabled="dialogStatus == 'update'">
          <el-option
            v-for="item in syncAppList"
            :key="item.appId"
            :label="item.appName"
            :value="item.appId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="topic" prop="topic">
        <div style="display:flex">
          <el-input
            v-model.trim="topicConfigTemp.topic"
            maxlength="50"
            show-word-limit
            class="limit"
          />
          <el-button type="primary" style="margin-left:10px" :disabled="!topicConfigTemp.appId"
                     @click="createTopic">生成</el-button>
        </div>
      </el-form-item>
    </el-form>
  </dtDialog>
</template>
<script>
import dataSynchronizationApi from '@/framework/api/datasync/dataSynchronization'
import { checkTopic } from '@/framework/utils/validate'

export default {
  data() {
    return {
      loading: false,
      topicConfigVisible: false,
      topicConfigTemp: {
        appId: '',
        topic: ''
      },
      topicConfigRules: {
        appId: [{
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请选择同步应用'))
            } else {
              callback()
            }
          }
        }],
        topic: [{
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请输入topic'))
            } else if (!checkTopic(value)) {
              callback(new Error('请输入字母、数字、下划线或中划线'))
            } else {
              callback()
            }
          }
        }]
      },
      syncAppList: [],
      dialogStatus: '',
      appId: ''
    }
  },
  methods: {
    openDialog(val, type) {
      this.topicConfigVisible = true
      if (type == 'update') {
        this.dialogStatus = 'update'
        dataSynchronizationApi.topicDetail({ id: val.id }).then((res) => {
          this.topicConfigTemp = res.data
          this.appId = res.data.appId
          this.topicConfigTemp.appId = res.data.appName
        })
      } else {
        this.dialogStatus = 'create'
        dataSynchronizationApi.dataSyncTopicApps().then((res) => {
          this.syncAppList = res.data
        })
      }
    },
    handleCancel() {
      this.topicConfigTemp = {
        appId: '',
        topic: ''
      }
      this.resetForm('topicConfigForm')
    },
    async onSubmit() {
      this.$refs['topicConfigForm'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.updateDate()
        }
      })
    },
    async updateDate() {
      try {
        if (this.dialogStatus == 'create') {
          await dataSynchronizationApi.disposeTopic(this.topicConfigTemp)
        } else {
          this.topicConfigTemp.appId = this.appId
          await dataSynchronizationApi.editTopic(this.topicConfigTemp)
        }
        this.$dtMessage({
          title: '成功',
          message: this.dialogStatus == 'create' ? '配置成功' : '更新成功',
          type: 'success',
          duration: 2000
        })
        this.$parent.getAppTopicPage()
        this.topicConfigVisible = false
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    createTopic() {
      const appIdParam = {}
      if (this.dialogStatus == 'create') {
        appIdParam.appId = this.topicConfigTemp.appId
      } else {
        appIdParam.appId = this.appId
      }
      dataSynchronizationApi.generateTopic(appIdParam).then((res) => {
        this.topicConfigTemp.topic = res.data
      })
    }
  }
}
</script>
